<template>
  <div class="orderDetail">
    <el-card shadow="never">
      <div class="steps">
        <el-steps
          :active="currentStep"
          direction="horizontal"
          process-status="wait"
        >
          <el-step title="待付款" :description="orderInfo.createTime" />
          <el-step title="待发货" :description="orderInfo.paymentTime" />
          <el-step title="已发货" :description="orderInfo.deliveryTime" />
          <el-step v-if="currentStep !==5" title="已完成" :description="orderInfo.finishTime" />
          <el-step v-if="currentStep !==4" title="退货" :description="orderInfo.receiveTime" />
        </el-steps>
      </div>
      <el-divider direction="horizontal" />
      <div class="title">
        订单信息:
        <el-tag
          v-if="currentStep == 1"
          size="small"
          type="danger"
          effect="dark"
        >待付款</el-tag>
        <el-tag
          v-else-if="currentStep == 2"
          size="small"
          type="warning"
          effect="dark"
        >待发货</el-tag>
        <el-tag v-else-if="currentStep == 3" size="mini">已发货</el-tag>
        <el-tag
          v-else-if="currentStep == 4"
          size="small"
          type="success"
          effect="dark"
        >已完成</el-tag>
        <el-tag
          v-else-if="currentStep == 5"
          size="small"
          type="info"
          effect="dark"
        >退货</el-tag>
        <el-tag v-else size="mini" type="info">无效订单</el-tag>
      </div>
      <div class="orderinfo">
        <el-row :gutter="20">
          <el-col :span="6" class="item">
            订单金额: {{ orderInfo.payAmount }}</el-col>
          <el-col :span="6" class="item">
            订单编号: {{ orderInfo.orderSn }}</el-col>
          <el-col :span="6" class="item">
            用户账号: {{ orderInfo.memberUsername }}</el-col>
          <el-col :span="6" class="item"> 备注: {{ orderInfo.note }}</el-col>
          <el-col :span="6" class="item">
            下单时间: {{ orderInfo.createTime }}</el-col>
          <el-col :span="6" class="item">
            付款时间: {{ orderInfo.paymentTime }}</el-col>
          <el-col :span="6" class="item">
            发货时间: {{ orderInfo.deliveryTime }}</el-col>
          <el-col :span="6" class="item">
            收货时间: {{ orderInfo.receiveTime }}</el-col>
        </el-row>
      </div>
      <el-divider direction="horizontal" />
      <div class="consignee">
        <div class="title">收货人信息:</div>
        <el-row :gutter="20">
          <el-col :span="6" class="item">
            收货人: {{ orderInfo.receiverName }}</el-col>
          <el-col :span="6" class="item">
            用户姓名: {{ orderInfo.memberUsername }}</el-col>
          <el-col :span="6" class="item">
            手机号码: {{ orderInfo.receiverPhone }}</el-col>
          <el-col :span="6" class="item">
            邮政编码: {{ orderInfo.receiverPostCode }}</el-col>
          <el-col :span="6" class="item">
            城市:
            {{
              orderInfo.receiverProvince +
                " " +
                orderInfo.receiverCity +
                " " +
                orderInfo.receiverRegion
            }}</el-col>
          <el-col :span="6" class="item">
            详情地址: {{ orderInfo.receiverDetailAddress }}</el-col>
        </el-row>
      </div>
      <el-divider direction="horizontal" />
      <div class="product">
        <div class="title">商品信息:</div>
        <el-table :data="orderItems" border stripe>
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="" label="商品图片">
            <template slot-scope="scope">
              <img
                :src="scope.row.productPic"
                alt=""
                srcset=""
                class="product-icon"
              >
            </template>
          </el-table-column>
          <el-table-column prop="" label="是否退货">
            <template slot-scope="scope">
              {{ scope.row.isReturn ? "是" : "不是" }}
            </template>
          </el-table-column>
          <el-table-column prop="productBrand" label="品牌" />
          <el-table-column prop="productPrice" label="价格" />
          <el-table-column prop="productQuantity" label="商品数量" />
          <el-table-column prop="totalPrice" label="小计" />
        </el-table>
      </div>
      <div class="costInfo">
        <div class="title">费用信息:</div>
        <el-row :gutter="20">
          <el-col :span="6" class="item">
            运费金额: {{ orderInfo.freightAmount || 0 }}</el-col>
          <el-col :span="6" class="item">
            订单总金额: {{ orderInfo.totalAmount || 0 }}</el-col>
          <el-col :span="6" class="item">
            实际金额: {{ orderInfo.payAmount || 0 }}</el-col>
          <el-col :span="6" class="item">
            促销优惠金额: {{ orderInfo.discountAmount || 0 }}</el-col>
        </el-row>
        <div v-if="currentStep == 2" class="logistics">
          <el-form
            ref="logisticsForm"
            :model="logisticsForm"
            :rules="logisticsFormRules"
            label-width="100px"
            :inline="false"
            size="normal"
          >
            <el-row>
              <el-col :span="6" :offset="0">
                <el-form-item label="物流公司">
                  <el-select
                    v-model="logisticsForm.deliveryCompany"
                    placeholder="请选择物流公司"
                    clearable
                  >
                    <el-option
                      v-for="item in deliveryCompanys"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                <el-form-item label="物流单号">
                  <el-input v-model="logisticsForm.deliverySn" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <el-divider v-if="currentStep > 2" direction="horizontal" content-position="left" />

      <div v-if="currentStep > 2" class="logistics-process">
        <div class="title">物流信息: <span style="color: gray">{{ orderInfo.deliveryCompany || '' }} {{ ` [${orderInfo.deliverySn || ''}] ` }}</span></div>
        <el-table :data="kdData.Traces" border stripe>
          <el-table-column
            prop="AcceptTime"
            label="时间"
            width="200"
          />
          <el-table-column
            prop="AcceptStation"
            label="状态"
          />
          <el-table-column
            prop="Remark"
            label="备注"
          />
        </el-table>

      </div>
      <div class="btns">
        <el-button
          v-if="currentStep == 2"
          type="primary"
          size="default"
          @click="handleSendOut"
        >确认发货</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { orderDetail, sendDone } from '@/api/order/list/index'

import kdData from './kd.json'
export default {
  data() {
    return {
      orderId: '',
      orderInfo: {},
      orderItems: [],
      logisticsForm: {}, // 发货的物流form
      logisticsFormRules: {
        deliveryCompanys: [
          {
            required: true,
            message: '请选择快递公司'
          }
        ],
        deliverySn: [
          {
            required: true,
            message: '请填写快递单号'
          }
        ]
      },
      deliveryCompanys: [
        '顺丰快递',
        '韵达快递',
        '中国邮政',
        '申通快递',
        '中通快递'
      ],
      kdData // 模拟快递数据
    }
  },
  computed: {
    currentStep() {
      return this.orderInfo.status + 1
    }
  },
  created() {
    this.orderId = this.$route.query.id
    this.getOrderDetail()
  },
  methods: {
    // 获取订单详情信息
    async getOrderDetail() {
      const { success, data, message } = await orderDetail(this.orderId)
      if (success) {
        this.orderInfo = data.orderDetail.orderBase
        this.orderItems = data.orderDetail.orderItems
      } else {
        this.$message.error(message)
      }
    },
    // 确认发货
    handleSendOut() {
      this.$refs.logisticsForm.validate(async(valid) => {
        if (valid) {
          const { success, message } = await sendDone({
            ...this.logisticsForm,
            orderId: this.orderId
          })
          if (success) {
            this.$message.success('提交成功')
            window.location.reload()
          } else {
            this.$message.error(message)
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scope>
.orderDetail {
  margin: 30px;
  .steps {
    width: 80%;
    margin: 30px auto;
  }
  .title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 20px;
  }
  .consignee,
  .costInfo,
  .orderinfo {
    .item {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
  }
  .product {
    margin: 30px 0;
    .product-icon {
      width: 100px;
      height: 100px;
    }
  }
  .btns {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
  }
}
</style>
